<template>
  <div class="frank_home" ref="homeRef" @mousemove="homeMousemove">
    <div class="fk_header">
      <header-aside />
    </div>
    <div class="fk_left_aside">
      <left-aside />
    </div>
    <div class="fk_main_content">
      <main-content />
    </div>
  </div>
</template>

<script>
import HeaderAside from "./component/HeaderAside";
import LeftAside from "./component/LeftAside";
import MainContent from "./component/MainContent";
import { ref, reactive, toRefs, getCurrentInstance, onBeforeMount, onMounted } from "vue";
// vuex管理的数据
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
    HeaderAside,
    LeftAside,
    MainContent,
  },
  props: [],
  setup() {
    const store = useStore(); // 实例化管理仓储
    let homeRef = ref()
    const state = reactive({});
    const homeMousemove = () => {
      store.dispatch("getLastTimeAct", { lastTime: new Date().getTime() })
    }
    onBeforeMount(() => {
    });
    onMounted(() => {
    });
    const refState = toRefs(state);
    return {
      ...refState,
      homeRef,
      homeMousemove
    };
  },
};
</script>
<style scoped>
.frank_home {
  width: 100vw;
  height: 100vh;
  background: #f2f5f8;
}

.frank_home .fk_header {
  height: 60px;
  width: 100%;
  background: #fff;
  /* background: rgba(125, 143, 255, 0.7); */

  position: absolute;
  /* border: 1px solid red; */
  border-bottom: 1px solid gainsboro;

}

.frank_home .fk_left_aside {
  width: 80px;
  height: calc(100% - 61px);
  background: #181E47;
  position: absolute;
  top: 61px;
}

.frank_home .fk_main_content {
  width: calc(100% - 80px);
  height: calc(100% - 61px);
  background: #f2f5f8;
  position: absolute;
  left: 80px;
  top: 61px;
  /* border: 1px solid red; */
}
</style>